<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="daterangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="row row-cols-auto d-flex justify-content-end mx-3">
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">
        新增
      </el-button>
      <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">
        修改
      </el-button>
      <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
        删除
      </el-button>
      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-if="false">
        导出
      </el-button>
      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </div>
    <el-table :data="page.records" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="图片" prop="imgUrl">
        <template #default="scope">
          <div class="radio ratio-4x3" style="width: 5rem;">
            <img :src="scope.row.imgUrl" alt="" class="" style="width: 100%;object-fit: fill">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="标签" prop="styleName"></el-table-column>
      <el-table-column label="创建人" prop="nickName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button size="mini" icon="el-icon-edit" type="text" @click="handleUpdate(scope.row)"></el-button>
          <el-button size="mini" icon="el-icon-delete" type="text" @click="handleDelete(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :total="page.total" layout="total,prev, pager, next" @current-change="init" :page-size="page.size" :current-page.sync="page.current"></el-pagination>

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" status-icon>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="标签" prop="styleId">
          <el-select v-model="form.styleId" class="formItem" placeholder="请选择">
            <el-option v-for="item in styles" :key="item.id" :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="name">
          <div class="w-100 d-flex flex-wrap">
            <div class="col-sm-3" :key="index" v-for="(item, index) in form.children">
              <div class="ratio ratio-4x3">
                <img :src="item.imgUrl" alt="">
              </div>
            </div>
            <WrdImgUploadModel class="col-sm-3" :url="form.tmpUrl" v-if="homeImg" @onSuccess="onSuccessHook">
            </WrdImgUploadModel>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getJson, postJson} from "@/api/http";
import {Img_create, Img_delete, Img_getInfo, Img_getPage, Img_update, SysEnum_getPage} from "@/api/api";
import WrdImgUploadModel from "@/components/WrdImgUploadModel.vue";
import {EnumImgType} from "@/api/config";

export default {
  name: "ImgType",
  components: {WrdImgUploadModel},
  data() {
    return {
      styles: [],
      homeImg: {},
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 删除标志时间范围
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {},
      page: {
        current: 1,
        total: 0,
        size: 10,
        records: []
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  async created() {
    await this.init();
    this.styles = (await getJson(SysEnum_getPage, {groupCode: EnumImgType})).data.records;
  },
  methods: {
    async init() {
      this.loading = false;
      this.queryParams.current = this.page.current;
      this.queryParams.size = this.page.size;
      this.queryParams.startTime = this.daterangeCreateTime?.at(0);
      this.queryParams.endTime = this.daterangeCreateTime?.at(1);
      this.queryParams.isHomeImg = true;
      let res = await getJson(Img_getPage, this.queryParams);
      this.page = res.data
      this.loading = false;
    },
    /** 搜索按钮操作 */
    async handleQuery() {
      this.page.current = 1;
      await this.init();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      // this.resetForm("queryForm");
      this.handleQuery();
    },
    // 表单重置
    reset() {
      this.form = {}
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加标签";
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      this.reset();
      this.open = true;
      let res = await getJson(Img_getInfo, {id: row.id});
      if (res.code === 1) {
        this.open = true;
        this.title = "修改标签";
        this.form = res.data;
      }
    },
    /** 删除按钮操作 */
    async handleDelete(row) {
      this.$confirm('确定要删除这项内容吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const ids = row.id !== undefined ? [row.id] : this.ids;
        let data = {
          ids: ids
        }
        let res = await postJson(Img_delete, data);
        if (res.code === 1) {
          this.$message.info("成功");
          await this.init();
        }
      }).catch(() => {
        // 用户取消删除
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /** 提交按钮 */
    async submitForm() {
      let res
      if (this.form.id != null) {
        res = await postJson(Img_update, this.form);
      } else {
        res = await postJson(Img_create, this.form);
      }
      if (res.code === 1) {
        this.$message.info("成功");
        this.open = false;
        await this.init();
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 导出按钮操作 */
    handleExport() {
      // this.download('system/dept/export', {
      //   ...this.queryParams
      // }, `label_${new Date().getTime()}.xlsx`)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    onSuccessHook(url) {
      this.form.children.push({imgUrl: url})
      this.form.tmpUrl = null;
    }
  }
}
</script>

<style scoped>

</style>